<template>
  <div class="pay-top">
    <van-nav-bar title="提交账单" left-arrow @click-left="onClickLeft" />
  </div>
  <div class="pay">
    <div class="info">
      <van-cell
        :title="HomeInfo.userInfo.name"
        icon="location-o"
        :label="HomeInfo.userInfo.formatted_address"
      >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
    </div>
    <div class="con">
      <div class="order">
        <div class="names" style="border-bottom: 1px solid #f7f7f7">
          洗发水旗舰店
        </div>
        <div
          class="order-but"
          style="display: flex; align-items: center"
          v-for="item in carlist"
        >
          <div class="order-img">
            <img style="" :src="item.image" alt="" />
          </div>
          <div class="order-con">
            <div class="name">{{ item.goods_name }}</div>
            <div
              class="num"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div class="number">￥{{ item.price / 100 }}</div>
              <div class="num-right">X{{ item.buy_num }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="deta-ze">
      <van-cell-group>
        <van-cell title="商品总额" value="￥216.00" />
      </van-cell-group>
    </div>
    <div class="deta-item">
      <van-cell-group>
        <van-cell title="立减" value="-￥16.00" />
        <van-cell title="运费" value="+￥0.00" />
      </van-cell-group>
      <div class="input" style="display: flex; align-items: center">
        <van-cell-group>
          <van-cell title="备注" />
        </van-cell-group>
        <input type="text" style="border: none" placeholder="请输入您的留言" />
      </div>
    </div>
    <div class="style">
      <div class="name">支付方式</div>
      <van-cell>
        <view slot="title" style="display: flex; align-items: center">
          <van-icon
            class="icon"
            slot="l-icon"
            name="wechat"
            color="#42AE3C"
            size="20px"
          />
          <view class="van-cell-text">支付宝支付</view>
        </view>
      </van-cell>
      <van-cell>
        <view slot="title" style="display: flex; align-items: center">
          <van-icon
            class="icon"
            slot="l-icon"
            name="wechat"
            color="#42AE3C"
            size="20px"
          />
          <view class="van-cell-text">支付宝支付</view>
        </view>
        <template #right-icon>
          <van-icon name="success" class="search-icon" />
        </template>
      </van-cell>
      <van-cell>
        <view slot="title" style="display: flex; align-items: center">
          <van-icon
            class="icon"
            slot="l-icon"
            name="wechat"
            style="background: #42ae3c"
            size="20px"
          />
          <view class="van-cell-text">支付宝支付</view>
        </view>
      </van-cell>
    </div>
    <div class="tj">
      <van-submit-bar
        :price="totaPrice"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { getDefault } from "@/api/user";
import { createOrder, getCart } from "@/api/cart";
const router = useRouter();
const list = ref([]);
const carlist = ref([]);
const cc = ref([]);
const id = ref();
const onClickLeft = () => history.back();
const onSubmit = () => {
  createOrder({
    mode: "cart",
    add_key: true,
    address_id: localStorage.getItem("uid"),
    cart_list: [
      {
        sku_id: carlist.value[0].sku_id,
        buy_num: 1,
        goods_id: carlist.value[0].goods_id,
      },
    ],
  }).then((res) => {
    console.log(res);
  });
};
// 数据存储
const HomeInfo = reactive({
  userInfo: [],
});

function info() {
  Promise.all([getDefault(), getCart()]).then((res) => {
    console.log(res);
    let [Default, Cart] = res;
    if (Default.code == 0) {
      HomeInfo.userInfo = Default.info;
      id.value = Default.info._id;
    }

    if (Cart.code == 0) {
      list.value = Cart.list;
      carlist.value = list.value.filter((v) => {
        if (v.action_checked) {
          return v;
        }
      });

      cc.value = carlist.value.map((v) => {});
    }
    console.log(list.value);

    console.log(carlist.value);
  });
}
// let aa = [1, 2, 3, 45, 6];
// aa.map((v) => {
//   console.log(v);
// });
// 总价钱
const totaPrice = computed(() => {
  let total = 0;
  carlist.value.forEach((item) => {
    if (item.action_checked) {
      total += item.buy_num * item.price;
    }
  });
  return total;
});
onMounted(() => {
  info();
});
</script>
<style>
.van-nav-bar .van-icon {
  color: black;
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
.pay {
  background: #f7f7f7;
}
.info {
  margin: 10px 0;
  background: white;
}
.pay-top {
  margin-bottom: 10px;
}
.order {
  padding: 10px 20px;
  background: white;
  margin-bottom: 10px;
}
.name {
  /* width: 80%; */
  font-size: 13px;
}
.order-img img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  margin-right: 20px;
}
.names {
  padding-bottom: 10px;
  color: #555555;
}
.order-but {
  padding: 10px 0;
}
.deta-item .van-cell__value {
  color: #fc6217;
}
.input {
  padding: 0 15px;
  background: white;
  margin-bottom: 10px;
}
.input .van-cell {
  padding: 0;
  margin-right: 10px;
}
.style {
  padding: 0 15px;
  background: white;
}
.icon {
  margin-right: 10px;
  padding: 5px;
  color: white;
}
.style .van-cell {
  padding: 6px 0;
}
</style>
